<template>
  <el-dialog v-model="dialogVisible" title="修改资料" width="800" draggable :before-close="reset">
    <div>
      <div class="item">
        <div class="preTitle">用户名</div>
        <div>
          <el-input
            placeholder="请输入昵称"
            v-model="user.nickname"
            style="width: 240px"
          ></el-input>
        </div>
      </div>
      <div class="item">
        <div class="preTitle">密码</div>
        <div>
          <el-input
            placeholder="请输入新密码"
            v-model="user.password"
            style="width: 240px"
            type="password"
          ></el-input>
        </div>
      </div>
      <div style="display: flex; margin-bottom: 20px">
        <div class="preTitle">个人描述</div>
        <div>
          <el-input
            v-model="user.description"
            maxlength="60"
            style="width: 240px"
            placeholder="请输入个人描述..."
            show-word-limit
            type="textarea"
          />
        </div>
      </div>
      <div class="item">
        <div class="preTitle">邮箱</div>
        <div>
          <el-input
            placeholder="请输入邮箱"
            v-model="user.emil"
            style="width: 240px"
            type="email"
          ></el-input>
        </div>
      </div>
      <div class="item">
        <div class="preTitle">头像</div>
        <div>
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/files/upload"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            v-model="user.avatar"
          >
            <img
              v-if="user.avatar"
              :src="user.avatar"
              class="avatar"
              style="width: 80px; height: 80px"
            />
            <el-icon v-else class="avatar-uploader-icon" style="margin-top: 30px"><Plus /></el-icon>
          </el-upload>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="updateUser"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import request from '@/util/request'
import { ref } from 'vue'
import { ElNotification } from 'element-plus'

const dialogVisible = ref(false)
const user = ref({})

const open = (item) => {
  dialogVisible.value = true
  user.value = item
}
const uploadSuccess = (res, upload) => {
  console.log(res)
  user.value.avatar = res.data.path
}

const updateUser = () => {
  request
    .post('/user/update', user.value)
    .then((res) => {
      console.log('获取成功：', res)
      reset()
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}
const reset = () => {
  user.value = {}
  dialogVisible.value = false
}

defineExpose({
  open
})
</script>

<style scoped>
.preTitle {
  width: 100px;
  text-align: right;
  line-height: 30px;
  margin-right: 10px;
}
.item {
  display: flex;
  height: 30px;
  margin-bottom: 20px;
}
.avatar-uploader {
  width: 80px;
  height: 80px;
  text-align: center;
  background: #eee;
}
</style>
